<!DOCTYPE html>
<html>

<head>
    <meta name="layout" content="main2"/>
    <g:set var="entityName" value="${message(code: 'activity.label', default: 'Activity')}"/>
    <title>我的日历</title>
    <asset:stylesheet src="mash/bower_components/fullcalendar/fullcalendar.min.css"/>
    <asset:stylesheet src="mash/assets/pages/timeline/style.css"/>

    <style>
    .fc-day-grid-event > .fc-content {
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .fc-event-container {
        padding: 1px 0 !important;
    }

    .fc-event-container a {
        padding: 1px 0 !important;
    }

    .fc-basic-view tbody .fc-row {
    }

    .time-list {
        padding: 6px 20px;
    }

    .time-list p {
        margin: 5px 0;
    }

    .fc-event-container a {
        border-color: transparent;
    }
    </style>
</head>

<body>
<div class="main-body">
    <div class="page-wrapper">
        <!-- Page-header start -->
        <div class="page-header">
            <div class="page-header-title">
                <h4>我的日历</h4>
            </div>

            <div class="page-header-breadcrumb">
                <ul class="breadcrumb-title">
                    <li class="breadcrumb-item">
                        <a href="/salesDashboard/index">
                            <i class="icofont icofont-home"></i>
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        我的日历
                    </li>
                </ul>
            </div>
        </div>

        <div class="page-body">
            <div class="row">
                <div class="col-lg-12">
                    <div class="tab-header">
                        <ul class="nav nav-tabs md-tabs tab-timeline" role="tablist" id="mytab">
                            <li class="nav-item">
                                <a class="nav-link active f-16" data-toggle="tab" href="#personal" role="tab" aria-expanded="true"><i class="fa fa-calendar"> </i> 我的预约</a>
                                <div class="slide"></div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link f-16" data-toggle="tab" href="#myTask" role="tab" aria-expanded="false"><i class="fa fa-check-square-o"> </i> 我的任务</a>
                                <div class="slide"></div>
                            </li>
                        </ul>
                    </div>
                    <!-- tab header end -->
                    <!-- tab content start -->
                    <div class="tab-content">
                        <div class="tab-pane active" id="personal" role="tabpanel" aria-expanded="true">
                            <div class="card">
                                <div class="card-header">
                                    我的预约

                                    <div class="card-header-right">
                                        %{-- <g:link controller="activity" action="createAppointment"><i class="fa fa-calendar"> </i> 预约</g:link> --}%
                                        <g:link controller="activity" action="createAppointment"><i class="icofont icofont-plus"> </i> 新增</g:link>

                                        %{-- <g:link controller="activity" action="createTask"><i class="fa fa-check-square-o"> </i> 任务</g:link> --}%
                                        %{-- <i class="icofont icofont-rounded-down"></i> --}%
                                    </div>
                                </div>

                                <div class="card-block">

                                    <div id="calendar"></div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane" id="myTask" role="tabpanel" aria-expanded="false">
                            <div class="card">
                                <div class="card-header">
                                    我的任务
                                    <div class="card-header-right">
                                        %{-- <g:link controller="activity" action="createAppointment"><i class="fa fa-calendar"> </i> 预约</g:link> --}%
                                        %{-- <g:link controller="activity" action="createTask"><i class="fa fa-check-square-o"> </i> 任务</g:link> --}%
                                        <g:link controller="activity" action="createTask"><i class="icofont icofont-plus"> </i> 新增</g:link>

                                    </div>

                                </div>

                                <div class="card-block">
                                    <div class="main-timeline">
                                        <div class="cd-timeline cd-container">
                                            <g:each in="${myTaskList}">
                                                <div class="cd-timeline-block">
                                                    <div class="cd-timeline-icon bg-primary">
                                                        <i class="icofont icofont-ui-file"></i>
                                                    </div>
                                                    <div class="cd-timeline-content card_main">
                                                        <div class="card-block">
                                                            <g:link controller="activity" action="show" id="${it?.id}"><h6>${it?.name}</h6></g:link>
                                                            <div class="timeline-details">
                                                                <a href="#">
                                                                    <i class="icofont icofont-ui-calendar"></i>
                                                                    <span>
                                                                        <g:formatDate date="${it?.startTime}" format="yyyy-MM-dd HH:mm:ss"></g:formatDate>
                                                                    </span> ~
                                                                    <span>
                                                                        <g:formatDate date="${it?.endTime}" format="yyyy-MM-dd HH:mm:ss"></g:formatDate>
                                                                    </span>
                                                                </a>
                                                                <p>
                                                                    <i class="icofont icofont-ui-user"></i><span>${it?.contact?.fullName}</span>
                                                                </p>
                                                                <p>
                                                                    <i class="icofont icofont-ui-edit"></i><span>${it?.status}</span>
                                                                </p>
                                                                <p class="m-t-10">${it?.description}</p>
                                                            </div>
                                                        </div>
                                                        <span class="cd-date">${it?.type?.name}</span>
                                                        <span class="cd-details">${it?.subtype?.name}</span>
                                                    </div>
                                                </div>
                                            </g:each>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- tab content end -->
                </div>
            </div>
        </div>
        <!-- Page-body end -->
    </div>
</div>



<asset:javascript src="mash/bower_components/moment/min/moment.min.js"/>
<asset:javascript src="mash/bower_components/fullcalendar/fullcalendar.min.js"/>
<asset:javascript src="mash/bower_components/fullcalendar/zh-cn.js"/>

<script>
    $(function () {
        $('#calendar').fullCalendar({
            eventLimit: true,
            monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,listMonth'
            },
            editable: false,
            events: [
                <g:each in="${appointmentList}">
                {
                    title: '${it?.assignedTo?.fullName}-${it?.name}-${it?.contact?.fullName}',
                    start: '<g:formatDate  date="${it?.startTime}" format="yyyy-MM-dd HH:mm:ss"></g:formatDate>',
                    end: '<g:formatDate date="${it?.endTime}" format="yyyy-MM-dd HH:mm:ss"></g:formatDate>',
                    backgroundColor: '<g:if test="${new Date(it?.startTime.getTime()).format("yyyy-MM-dd") == new Date().format("yyyy-MM-dd")}">#FF0000</g:if><g:else><g:if test="${it?.status == "已完成"}">#4CAF50</g:if><g:if test="${it?.status == "未执行"}">#e78170</g:if><g:if test="${it?.status == "已推迟"}">#f0ad4e</g:if><g:if test="${it?.status == "已取消"}">#3498db</g:if></g:else>',
                    url: "/activity/show/" + ${it?.id},
                },
                </g:each>
            ],

        });

    });

    function getColor() {
        var colorArray = ['5c7b98', '#3498db', '#f0ad4e', '#e78170', '#4CAF50'];
        var n = Math.floor(Math.random() * colorArray.length + 1) - 1;
        return colorArray[n];
    };
</script>
</body>

</html>
